@import '../../assets/styles/common/variable.scss';
$containerBgC: #AEDFFF;
$resumeContainerBgC: #fff;
$fontColorN: #333; // 普通文字颜色
$fontSize-normal: px2(16);

@mixin setIconBg($iconName) {
  background: url("../../assets/images/resume/#{$iconName}") no-repeat center center $blue;
  background-size: auto px2(16);
}

.container {
  width: 100%;
  height: 100%;
  background-color: $containerBgC;
  padding: px2(100) 0;
  overflow: auto;
  color: $fontColorN;
  font-size: px2(20);
}
.resume-container {
  margin: 0 auto;
  width: 70%;
  min-width: px2(600);
  min-height: px2(700);
  background-color: $resumeContainerBgC;
  border-radius: px2(5);
  box-shadow: 0px 16px 22px 2px rgba(0,37,58,0.24);
  //transition: all 0.2s linear;
  overflow: hidden;
  &:hover {
    //transform: translateY(px2(-5));
  }

  .header {
    width: 100%;
    min-height: px2(200);
    padding: 0 0 0 px2(200);
    //background-color: rgba(159,220,221,0.3);
    .header-avatar {
      left: px2(30);
      top: 50%;
      transform: translateY(-50%);
      width: px2(100);
      height: px2(100);
      border-radius: 50%;
      border: 2px solid #ddd;
      overflow: hidden;
      .header-avatar-img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: auto;
      }
    }
    .header-content {
      padding: px2(20) px2(20) px2(20) 0;
      .content-item {
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        &:nth-child(n+2) {
          margin-top: px2(20);
        }
        &.contact {
          width: 80%;

          .info-contact {
            position: relative;
            width: 50%;
            padding-left: px2(30);
            font-size: px2(16);
            &:nth-child(n+3) {
              margin-top: px2(10);
            }
            .contact-tip {
              font-size: px2(12);
              color: #999;
            }
            .contact-icon {
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              display: block;
              width: px2(24);
              height: px2(24);
              border-radius: 50%;

              &.phone {
                @include setIconBg('icon_phone.png');
              }
              &.email {
                @include setIconBg('icon_email.png');
              }
              &.qq {
                @include setIconBg('icon_qq.png');
              }
              &.weChat {
                @include setIconBg('icon_weChat.png');
                .qrCode-weChat {
                  display: none;
                  left: px2(0);
                  bottom: px2(-140);
                  width: px2(130);
                  height: px2(130);
                  border-radius: px2(6);
                  background: url("../../assets/images/resume/QRCode.png") no-repeat center center #fff;
                  background-size: px2(120) px2(120);
                  box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.24);
                }
                &:hover {
                  .qrCode-weChat {
                    display: block;
                  }
                }
              }
            }
          }
        }
        &.tag {
          width: 60%;
          .tag-item {
            padding: 0 px2(20);
            border-radius: px2(4);
            line-height: px2(26);
            height: px2(30);
            background-color: #DCDCDC;
            color: #666;
            font-size: px2(16);
            font-weight: bold;
            margin-right: px2(10);
            margin-bottom: px2(15);
            white-space: nowrap;
          }
        }
        &.introduction {
          padding-right: px2(20);
          font-size: $fontSize-normal;
        }
      }
      .info-name {
        font-size: px2(30);
        font-weight: bold;
        white-space: nowrap;
      }
      .info-job {
        margin-left: px2(40);
        white-space: nowrap;
      }
    }
  }
  .content {
    width: 100%;
    padding-bottom: px2(60);
    .part {
      margin-top: px2(20);
      &:nth-child(n+2) {
        margin-top: px2(40);
      }
      .part-title {
        border-bottom: px2(2) solid #ddd;
        p {
          display: inline-block;
          padding: 0 px2(20) px2(10);
          font-size: px2(26);
          font-weight: bold;
          line-height: px2(32);
        }
      }
      .item-title {
        position: relative;
        width: 100%;
        padding-right: px2(200);
        font-size: px2(24);
        font-weight: bold;
        color: #333;
        span {
          position: absolute;
          right: 0;
          font-weight: normal;
          font-size: px2(18);
          color: #999;
        }
      }
      .part-item {
        margin-top: px2(10);
        padding: 0 px2(40);
        &:nth-child(n+3) {
          margin-top: px2(20);
        }
        .item-content {
          padding-left: px2(20);
        }
        .item-text {
          font-size: $fontSize-normal;
          span {
            font-size: $fontSize-normal;
          }
        }
        p {
          margin-top: px2(5);
          font-size: $fontSize-normal;
        }
        ul li{
          position: relative;
          padding-left: px2(15);
          font-size: $fontSize-normal;
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: px2(10);
            width: px2(6);
            height: px2(6);
            border-radius: 50%;
            background-color: $blue;
          }
        }
        span {
          &.item-content-title {
            font-weight: bold;
          }
          &.highlight {
            font-weight: bold;
            color: $red;
          }
        }

      }
      &.education {
      }
    }
  }
}
